import React, { Component } from 'react'

export default class App extends Component {
  state = {
    list: [
      {
        brand: '奔驰',
        items: [ 'S系列', 'E系列' ]
      },
      {
        brand: '奥迪',
        items: [ 'A系列', 'Q系列' ]
      }
    ]
  }
  render() {
    // 不要在jsx代码中使用 for 循环（foreach）
    // 可以把jsx代码存入到数组中，
    // 可以在jsx代码中使用 map 方法遍历数据
    return (
      <div>
        { 
          // 为了代码的严谨性，可以先判断数据再渲染
          this.state.list && this.state.list.map((item, index) => {
            return <div key = { item.brand }>
              { item.brand }
              <ul>
                {
                  item.items.map((itm, idx) => {
                    return <li key = { idx }>{ itm }</li>
                  })
                }
              </ul>
            </div>
          })
        }
      </div>
    )
  }
}
